<template>
  <div style="float:right;width:49%;border:1px  ">测试任务：
    <el-button type="primary"  size="mini" @click="addNewTask(tasks)">新增</el-button>
    <el-table :data="tasks">
      <el-table-column
        type="index"
        width="50">

        <template slot-scope="{row,$index}">
          <span v-show="!row.editable">{{$index+1}}</span>
          <el-button v-show="row.editable" type="primary" icon="el-icon-check" size='mini'
                     @click=updatetask(ownNo,row)></el-button>
          <el-button class="marginleftset" v-show="row.editable" type="primary" icon="el-icon-close" size='mini'
                     @click=deletetask($index,row)></el-button>

        </template>
      </el-table-column>
      <el-table-column label="测试点">
        <template slot-scope="{row,index}">
          <span v-show="!row.editable" @dblclick="edit(row,index)">{{row.name }}</span>
          <el-input size="mini"  v-show="row.editable" v-model="row.name"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="人员">
        <template slot-scope="{row,index}">
          <ecectorshow :exectors="row.workers" :editable="row.editable"
                       :employees="employees"></ecectorshow>
          <!-- <span v-show="!row.editable" @dblclick="edit(row,index)">{{row.executor}}</span>
           <el-input v-show="row.editable"  v-model="row.executor.toString()"  ></el-input>-->

        </template>
      </el-table-column>

      <el-table-column label="进度">
        <template slot-scope="{row,index}">
          <span v-show="!row.editable" @dblclick="edit(row,index)">{{row.progress}}%</span>
          <el-input size="mini"   v-show="row.editable" v-model="row.progress"></el-input>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
  import {getTaskInfos,saveTaskInfo,saveTaskInfos,deleteTaskInfo} from '../../../api/testmanager'
  import vue from 'vue'
  import ecectorshow from './ecectorShow'
    export default {
        name: "taskManager",
      data(){
          return {

          }
      },
      methods:{
        addNewTask(tasks){
          let newtask={
            id:0,
            name:'',
            progress:0,
            workers:[],
            editable:true
          }
          tasks.push(newtask)
        },
        edit(value2, index) {
          vue.set(value2, 'editable', true)
        },
        deletetask(index,row){
          if(row.id === 0){
            this.tasks.splice(index,1)
            return
          }
        vue.delete(row,'editable')
          deleteTaskInfo(row.id)
            .then(res=>{
              this.tasks.splice(index,1)
            })
            .catch(err=>{
              vue.set(row, 'editable', true)
              this.$alert(err.data, 'error')
            })
        },
        updatetask(ownno,row) {
          vue.delete(row, 'editable')
          if (row.name.trim()!==''){
            saveTaskInfo(ownno,row)
              .then(res=>{

              })
              .catch(err=>{
                //console.log(err)
                this.$alert(JSON.stringify(err.response.data), 'error')
                vue.set(row, 'editable', true)
              })
          }


        },
      },
      props:[
        "employees",
        "tasks",
        "ownNo"
      ],
      components:{
        ecectorshow
      }



    }
</script>

<style scoped>
.marginleftset  {

  margin-left: 0px ;
}
</style>
